import { useIntersectionObserver } from '@vueuse/core'
// 导入默认图片-图片加载不出来显示的图片
import defaultImg from '@/assets/images/200.png'
// 定义全局指令-函数式
export const directivePlugin = (app) => {
  // console.log(app)
  // 扩展自定义指令
  app.directive('lazy-img', {
    mounted (el, binding) {
      // el:表示使用指令的DOM元素
      // binding:表示指令相关的信息是一个对象
      // console.log(el, binding.value)
      // 懒加载核心逻辑实现
      // 图片懒加载思路：只有图片进入到视口区域之后才正式发送图片链接请求
      // 1. 如何知道图片进入到视口区域？useIntersectionObserver
      // 2. 如何控制图片发送请求？img.src = 'url'
      const { stop } = useIntersectionObserver(
        el,
        ([{ isIntersecting }], observerElement) => {
          // isIntersecting:元素进入到视口区域 true
          // 不在视口区域 false
          // 当首次完成图片正式加载之后 监听就应该停止才对
          // console.log(observerElement)
          if (isIntersecting) {
            // 错误先行
            // 加载失败,显示默认图片
            el.onerror = function () {
              // 加载默认图片
              el.src = defaultImg
            }
            // 进入可视区,给图片的src属性赋值,发送请求,加载图片
            el.src = binding.value
            // 停止监听
            stop()
          }
        }
      )
    }
  })
}
// 定义全局指令-对象式
export const directivePlugins = {
  install (app) {
    // console.log(app)
    app.directive('lazy-name', {
      mounted (el, binding) {
        // console.log(el, binding.value)
      }
    })
  }
}
